import { ethers } from "ethers";

function Header({ account, setAccount }) {
  const connectHandler = async () => {
    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
    setAccount(accounts[0]);
  };

  return (
    <header className="flex justify-between items-center p-4 bg-gray-900 border-b-4 border-pink-500 shadow-[4px_4px_0_#ff00ff] font-pixel">
      <p className="text-2xl text-pink-400 tracking-widest">Prediction Market</p>
      {account ? (
        <p className="text-green-400 bg-black px-3 py-1 border-2 border-green-500 shadow-[2px_2px_0_#00ff00]">
          {account.slice(0, 6) + "..." + account.slice(-4)}
        </p>
      ) : (
        <button
          onClick={connectHandler}
          className="px-4 py-2 bg-blue-500 text-white border-4 border-blue-700 shadow-[4px_4px_0_#0000ff] transition-transform duration-200 active:translate-x-1 active:translate-y-1"
        >
          Connect to Wallet
        </button>
      )}
    </header>
  );
}

export default Header;
